<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
    <title>vw适配响应式</title>

    <style>
      @import "https://unpkg.com/open-props" layer(design.system);

      @import "https://unpkg.com/open-props/normalize.dark.min.css" layer(base.normalize);

      @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200..900&family=Pacifico&display=swap");

      @import "https://www.unpkg.com/layout-craft@0.1.1/dist/utilities.css" layer(design.utilities);
      /* 
Source code of these utilities: 
https://github.com/mobalti/layout-craft/blob/main/lib/utilities.css 
*/

      @layer base.normalize-overrides {
        :root {
          font-family: "Inter", sans-serif;
          --surface-1: black;
          --surface-2: oklch(0.19 0 0);
          --surface-3: #f1dadf;
          --text-1: white;

          --brand-1: oklch(0.65 0.24 16.93);
          --brand-2: oklch(0.77 0.1 90);

          --nav-block-size: 3.75rem;
          @media (width >= 1024px) {
            --nav-block-size: 4.625rem;
          }
        }

        html {
          scroll-padding-block-start: var(--nav-block-size);
        }

        body {
          -webkit-font-smoothing: antialiased;
        }
      }

      @layer base.containers {
        main {
          background-color: var(--surface-3);
          color: var(--surface-1);
        }

        .Hero {
          @media (width >= 1024px) {
            grid-template-columns: 1.5fr 1fr;
            --_gap: var(--size-10);
          }
        }
      }

      @layer base.components {
        .Nav {
          position: fixed;
          inset-block-end: 0%;
          inset-inline: 0;
          block-size: var(--nav-block-size);
          z-index: var(--layer-3);

          background-color: hsl(0 0% 0%/ 0.1);

          backdrop-filter: blur(28px);

          > a {
            background: var(--gradient-21);

            color: white;
            border-radius: var(--radius-round);
            padding: var(--size-2) var(--size-4);
            text-decoration: none;
            font-weight: var(--font-weight-6);
            box-shadow: var(--shadow-2);
          }

          @media (width >= 1024px) {
            background-color: var(--surface-1);
            font-size: 14px;
            position: sticky;
            inset-block-start: 0;
            inline-size: 100%;
            justify-items: end;
            padding-inline: var(--size-5);
          }
        }

        .Visual {
          & img {
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
            object-position: center center;

            background: var(--gradient-8);
          }
          @media (width >= 1024px) {
            position: fixed;
            inline-size: 62%;
            block-size: calc(100dvb - var(--size-9));
            inset-block-start: var(--size-9);

            > * {
              grid-area: 1/1;
            }

            & img {
              border-radius: inherit;
            }

            & picture {
              max-inline-size: 600px;
              aspect-ratio: var(--ratio-square);
              border-radius: var(--radius-3);
            }
          }

          @media (1024px < width < 1440px) {
            & img {
              max-inline-size: 500px;
            }
          }

          @media (width < 1024px) {
            > * {
              min-block-size: calc(100dvb - var(--size-9));
            }

            picture {
              inline-size: 100%;
              block-size: 100%;
            }
          }
        }

        .Content {
          > * {
            min-block-size: calc(100dvb - var(--size-9));
          }
          & h3 {
            max-inline-size: 13ch;
            text-wrap: balance;
            font-size: 3.75rem;
            font-weight: var(--font-weight-7);
            line-height: var(--font-lineheight-0);
            padding-block-end: var(--size-4);
          }

          & p {
            max-inline-size: var(--size-content-2);
            font-size: var(--font-size-3);
          }

          .subhead {
            color: var(--brand-1);
            font-size: var(--font-size-6);
            font-weight: var(--font-weight-6);
            max-inline-size: var(--size-content-1);
            line-height: var(--font-lineheight-1);
            text-wrap: pretty;
          }

          @media (width < 1024px) {
            display: none;
          }

          @media (width < 1440px) {
            & h3 {
              font-size: var(--font-size-7);
            }

            .subhead {
              font-size: var(--font-size-5);
            }
          }
        }

        .SmallScreenContent {
          position: fixed;
          inset-inline: 0;
          inset-block-start: 0;
          min-block-size: var(--size-9);
          color: black;

          > * {
            grid-area: 1/1;
          }

          @media (width < 1024px) {
            background-color: black;
            > p {
              background-color: black;
              color: white;
              inline-size: 100%;
              text-align: center;
              padding: var(--size-2);
              font-weight: var(--font-weight-5);

              box-shadow: var(--shadow-1);
            }
          }

          @media (width >= 1024px) {
            display: none;
          }
        }
      }

      @supports (animation-timeline: scroll()) {
        @layer animation.ScrollDriven {
          @media (width >= 1024px) {
            body {
              timeline-scope: --first-lockup, --second-lockup, --third-lockup;
            }

            picture {
              inline-size: 400px;
              transform-origin: bottom left;

              > img {
                box-shadow: var(--shadow-4);
              }
            }

            .FirstPic {
              > img {
                rotate: 8deg;
              }
            }

            .SecondPic {
              animation: auto slide-out-rotate linear both;
              animation-timeline: --third-lockup;

              > img {
                rotate: -5deg;
              }
            }

            .ThirdPic {
              animation: auto slide-out-rotate linear forwards;
              animation-timeline: --second-lockup;

              > img {
                rotate: 20deg;
              }
            }

            .FirstLockup {
              view-timeline-name: --first-lockup;
            }

            .SecondLockup {
              view-timeline-name: --second-lockup;
            }

            .ThirdLockup {
              view-timeline-name: --third-lockup;
            }
          }
        }

        @media (width >= 1440px) {
          .Visual picture {
            inline-size: 500px;
          }
        }
        @media (width >= 1600px) {
          .Visual picture {
            inline-size: 512px;
          }
        }

        @media (width < 1024px) {
          body {
            timeline-scope: --first-pic, --second-pic, --third-pic;
          }

          .SmallScreenContent {
            > p {
              animation: auto reveal linear both;
              animation-range: cover 45%;
            }

            .FirstStory {
              animation-timeline: --first-pic;
            }

            .SecondStory {
              visibility: hidden;
              animation-timeline: --second-pic;
            }

            .ThirdStory {
              visibility: hidden;
              animation-timeline: --third-pic;
            }
          }

          .FirstPic {
            view-timeline-name: --first-pic;
          }

          .SecondPic {
            view-timeline-name: --second-pic;
          }

          .ThirdPic {
            view-timeline-name: --third-pic;
          }
        }

        .pagination {
          position: fixed;
          inset-block-end: var(--size-8);
          z-index: var(--layer-3);

          & a {
            --size: var(--size-3);
            block-size: var(--size);
            inline-size: var(--size);
            border: var(--border-size-1) solid var(--brand-1);
            border-radius: var(--radius-round);

            animation: highlight linear both;

            &:nth-child(1) {
              animation-timeline: --first-lockup;
            }
            &:nth-child(2) {
              animation-timeline: --second-lockup;
            }
            &:nth-child(3) {
              animation-timeline: --third-lockup;
            }
          }

          @media (width < 1024px) {
            display: none;
          }
        }
      }

      @supports not (animation-timeline: scroll()) {
        .pagination {
          display: none;
        }
      }

      @keyframes slide-out-rotate {
        50%,
        100% {
          transform: translate(-50%, 50%) rotate(-50deg);
        }

        40%,
        100% {
          opacity: 0;
        }
      }

      @keyframes reveal {
        to {
          visibility: visible;
        }
      }

      @keyframes highlight {
        50% {
          background-color: hsl(347, 100%, 58%);
        }
      }
    </style>
  </head>
  <body class="block-center-center">
    <nav class="Nav block-center-center">
      <a href="/"> Get Started </a>
    </nav>
    <main class="inline content-full">
      <section class="Hero inline gap-2">
        <div class="Wrapper block content-3">
          <div class="Visual block-center-center">
            <picture class="FirstPic">
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-3.avif" media="(width >= 1024px)" type="image/avif" />
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-3.avif" type="image/avif" />

              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-3.webp" media="(width >= 1024px)" type="image/webp" />
              <img src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-3.webp" alt="Stories Unveiled" />
            </picture>
            <picture class="SecondPic">
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-2.avif" media="(width >= 1024px)" type="image/avif" />
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-2.avif" type="image/avif" />

              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-2.webp" media="(width >= 1024px)" type="image/webp" />
              <img src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-2.webp" alt="Celebrating Life Together" />
            </picture>
            <picture class="ThirdPic">
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-1.avif" media="(width >= 1024px)" type="image/avif" />
              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-1.avif" type="image/avif" />

              <source srcset="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-desktop-1.webp" media="(width >= 1024px)" type="image/webp" />
              <img src="https://raw.githubusercontent.com/mobalti/open-props-interfaces/main/stories-with-scroll-driven/images/img-mobile-1.webp" alt="The Art of Giving" />
            </picture>
          </div>
        </div>

        <div class="Content block">
          <div id="StoriesUnveiled" class="FirstLockup block-center-start">
            <div class="block gap-3">
              <h3>Stories Unveiled</h3>
              <div class="subhead">Capture the essence of family celebration.</div>
              <p>Share the moments that weave your family tale.</p>
            </div>
          </div>
          <div id="CelebratingLifeTogether" class="SecondLockup block-center-start">
            <div class="block gap-3">
              <h3>Celebrating Life Together</h3>
              <div class="subhead">Embrace the significance of shared joy.</div>
              <p>In every celebration, find the heartwarming stories.</p>
            </div>
          </div>
          <div id="TheArtofGiving" class="ThirdLockup block-center-start">
            <div class="block gap-3">
              <h3>The Art of Giving</h3>
              <div class="subhead">Explore the stories within each present.</div>
              <p>Every gift is a chapter in your family's narrative.</p>
            </div>
          </div>
        </div>

        <!-- mobile sda  -->
        <div class="SmallScreenContent block-center-center">
          <p class="FirstStory">The Art of Giving</p>
          <p class="SecondStory">Celebrating Life Together</p>
          <p class="ThirdStory">Stories Unveiled</p>
        </div>
      </section>

      <div class="pagination block-center-center content-full">
        <div class="inline gap-3">
          <a href="#StoriesUnveiled"></a>
          <a href="#CelebratingLifeTogether"></a>
          <a href="#TheArtofGiving"></a>
        </div>
      </div>
    </main>
  </body>
</html>
